<template>
	<view class="list-container">
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="img">
				<image :src="item.img" mode=""></image>
			</view>
			<view class="name">
				{{ item.name }}
			</view>
			<view class="price">
				<text class="highlight">¥{{ item.now }}</text>
				<text class="lowlight" v-if="item.original">¥{{ item.original }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import item from '@/components/langwen/item.vue';
export default {
    props: ['goodsData']
}
</script>

<style lang="less">
.list-container {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;
	background:rgba(255,255,255,1);
	box-shadow:0px 2rpx 16rpx 0px rgba(0,0,0,0.02);
	border-radius:20rpx;
	.item {
		width: 33.3%;
		text-align: left;
		margin: 30rpx 0;
		.img {
			width:160rpx;
			height:107px;
			margin: 0 auto 5px auto;
		}
		.name {
			width: 80px;
			font-size:24rpx;
			font-weight:400;
			color:rgba(51,51,51,1);
			line-height:36rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			margin: 0 auto;
		}
		.price {
			width: 80px;
			margin: 10rpx auto auto;
			font-size:24rpx;
			font-weight:600;
			.highlight {
				color:rgba(255,101,24,1);
			}
			.lowlight {
				color:rgba(191,191,191,1);
				text-decoration: line-through;
				margin-left: 10rpx;
			}
		}
	}
}
</style>
